<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息</title>
    <style type="text/css">
        /*body{
            position: relative;
        }*/

        .addC {
            position: absolute;
            left: 100px;
            top: 30px;
            display: block;
        }
    </style>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            var pageNo = 1;
            var pageSize = 10;
            var table = $("#stable");

            function load() {
                $("#gopage").val(pageNo);
                //var par=$("#searchForm").serialize();

                //par+="&p="+pageNo+"&pageSize="+pageSize;
                // alert(par);//a=b&c=f
                table.find("tr:gt(0)").remove();
                //{"p":pageNo,"pageSize":pageSize}
                $.getJSON("studentAjax", {
                    "p": pageNo,
                    "pageSize": pageSize,
                    sname: $("input[name=sname]").val(),
                    qq: $("input[name=qq]").val(),
                    wechat: $("input[name=wechat]").val(),
                    dateStart: $("input[name=dateStart]").val(),
                    dateEnd: $("input[name=dateEnd]").val()
                }, function (data) {
                    $("#total").text(data.totalPage);
                    $.each(data.datas, function (i, d) {
                        var ar = new Array();
                        //ar.push("<a href='showexamresult.html?stuno="+d.stuno+"'>查看成绩</a>");
                        ar.push("<a href='#' id='show' data-stuno='" + d.stuno + "'>查看成绩</a>");
                        table.append("<tr><td>" + d.stuno + "</td><td>" + d.sname + "</td><td>性别</td><td>" + d.telephone + "</td><td>" + d.qq + "</td><td>" + d.wechat + "</td><td>年级</td><td>" + (d.enterdate ? d.enterdate : "") + "</td><td>来自哪里</td><td>生日</td><td>家庭住址</td><td colspan='5'>" + ar.join('') + "</td></tr>");
                    });
                });
            }

            load();
            //下一步
            $("#page a#next").click(function () {
                pageNo++;
                load();
                return false;
            });
            $("#page a#first").click(function () {
                pageNo = 1;
                load();
                return false;
            });
            $("#page a#last").click(function () {
                pageNo = $("#total").text();
                load();
                return false;
            });
            $("#go").click(function () {
                pageNo = $("#gopage").val();
                load();
                return false;
            });
            $("#search").click(function () {
                pageNo = 1;
                load();
                return false;
            });
            //
            table.on("click", "a#show", function () {
                var stuno = $(this).attr("data-stuno");
                alert(stuno);
                window.sessionStorage.setItem("stuno", stuno);
                window.location = 'showexamresult.html';
            });

            //
            $("a#toAdd").click(function () {
                $("#top").css("opacity", 0.1);
                $("#addForm").addClass("addC").show();
                return false;
            });
        });
    </script>
</head>
<body>
<div id="top">
    <p align="center">
        <a id="toAdd" href="addStudnet.html">添加新生</a>
    <form action="studentServlet" id="searchForm">
        <input type="search" value="" name="sname" placeholder="输入学生名来搜索"/>
        <input type="search" value="" name="qq" placeholder="输入qq号来搜索"/>
        <input type="search" value="" name="wechat" placeholder="输入学生微信号来搜索"/>
        入学时间从<input type="date" value="" name="dateStart" placeholder="起始"/>-<input type="date" value='' name="dateEnd"
                                                                                    placeholder="终止"/>
        <input type="submit" value="查找" id="search"/>
    </form>
    </p>

    <table id="stable" border="1" cellspacing="0" cellpadding="0">
        <caption>学生列表</caption>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>电话</th>
            <th>qq</th>
            <th>微信</th>
            <th>年级</th>
            <th>入学时间</th>
            <th>来自哪里</th>
            <th>生日</th>
            <th>家庭住址</th>
            <th colspan="5">操作</th>
        </tr>
    </table>
    <p align="center" id="page">
        <a href="#" id="first">首页</a>

        <a href="#" id="prev">上一页</a>

        <input type="number" id="gopage" value="${pages.pageNo}" min="1" max="${pages.totalPage}" name="goto"
               style="width: 45px" size="3"/>
        <span id="total"></span>
        <input type="button" value="Go" id="go"/>
        <a href="#" id="next">下一页</a>
        <a href="#" id="last">尾页</a>
    </p>
</div>
<div id="addForm" style="display: none;border: 1px;background-color: darkgray">
    <form action="doAddStudent" method="post" enctype="multipart/form-data">
        <p>姓名：<input type="text" name="sname" required><span>${sname}</span></p>
        <p>
            性别：<input type="radio" name="sex" value="男" checked> 男
            <input type="radio" name="sex" value="女"> 女
            <input type="radio" name="sex" value="妖"> 妖
            <input type="radio" name="sex" value="人妖"> 人妖
        </p>
        <p>电话：<input type="text" name="telephone" onblur="checkTele(this)"></p>
        <p>QQ：<input type="text" name="qq"></p>
        <p>微信：<input type="text" name="wechat"></p>

        <p>
            年级：
            <select name="gradeid" size="1" style="width: 200px;">

            </select>
        </p>

        <p>入学时间：<input type="date" name="enterdate"><span>${enterdate}</span></p>
        <p>来自城市：<input type="text" name="fromcity"></p>
        <p>出生日期：<input type="date" name="birthday"></p>
        <p>家庭住址：<input type="text" name="address"></p>
        <p>密码：<input type="text" name="pass"></p>
        <p>身份证照片：<input type="file" name="f_idcardpic"></p>
        <p><input type="submit" value="提交"></p>
    </form>

    <script>
        $(function () {

            $.get("findGrades", function (data) {
                var s = $("select[name=gradeid]");
                //data=JSON.parse(data);
                $.each(data, function (i, d) {
                    s.append("<option value='" + d.id + "'>" + d.gname + "</option>");
                });
            }, "json");
            $("input[name=telephone]").blur(function () {
                if (this.value == "") {
                    alert("手机号没有写");
                    return false;
                }
                $.get("checkphone", {phone: this.value}, function (res) {
                    if (res == "true") {
                        $(":submit").attr("disabled", true);
                        alert("手机号已经被注册了");
                    } else {
                        $(":submit").removeAttr("disabled");
                        alert("手机号可以使用!");
                    }
                }, "text");
            });
        });
    </script>
</div>
</body>
</html>